<template>
  <CommonLayout>
    <view class="h-full py-10 px-5 flex flex-col justify-between">
      <view class="space-y-10">
        <view class="border-b border-gray-200  p-3 space-y-5">
          <view>
            <button class="avatar-wrapper rounded-full" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
              <image class="avatar round" :src="avatar"></image>
            </button>
          </view>
          <view class="grid-cols-3 grid">
            <view class="text-gray-700 ">昵称：</view>
            <view class="col-span-2">
              <input required type="nickname" v-model="username"/>
            </view>
          </view>
        </view>
        <view class="space-y-3">
          <view>
            · 申请以下权限
          </view>
          <view class="text-gray-400 text-sm">
            · 获取你的公开信息（昵称、头像等）
          </view>
        </view>
        <view class="space-y-5">
          <view v-if="loginCode">
            <button class="bg-blue-500 font-bold text-white px-10 active:bg-blue-400" @click="handleLogin">授权登录
            </button>
          </view>
          <view>
            <button class="bg-white text-black px-10 active:bg-gray-100" @click="handleScan">扫码登录</button>
          </view>

        </view>
      </view>
      <view class="">
        <view class="text-center text-red-500">
          <navigator open-type="exit" target="miniProgram">退出程序</navigator>
        </view>
      </view>

    </view>

  </CommonLayout>
</template>

<script setup lang="ts">

import CommonLayout from "@/layout/CommonLayout.vue";
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import api from "@/api";
import {checkURL, getUrlObj} from "@/utils";

const fileUrl = ref('')
const filePrefix = ref('')
const loginUrl = ref('')
const loginCode = ref('')

onLoad((query: any) => {
  if (query.loginCode) {
    loginCode.value = query.loginCode
    loginUrl.value = query.loginUrl
    fileUrl.value = query.fileUrl
    filePrefix.value = query.filePrefix
  } else if (query.q) {
    const url = decodeURIComponent(query.q)
    const obj = getUrlObj(url)
    loginCode.value = obj.loginCode
    loginUrl.value = obj.loginUrl
    fileUrl.value = obj.fileUrl
    filePrefix.value = obj.filePrefix
  }
})


const avatar = ref('https://zzjtpp.top/blogAPI/upload/blog/images/2023-07-17/8ip93voho3.jpeg')
const username = ref('momo')
const onChooseavatar = (e: any) => {
  uni.uploadFile({
    url: fileUrl.value,
    filePath: e.detail.avatarUrl,
    name: 'file',
    success: (uploadFileRes) => {
      let tmp = JSON.parse(uploadFileRes.data).data
      if (!checkURL(tmp)) {
        avatar.value = filePrefix.value + tmp
        console.log(avatar.value)
      }
    }
  });
}
const handleLogin = () => {
  uni.login({
    provider: 'weixin', //使用微信登录
    success: function (loginRes) {
      console.log(loginRes)
      api.common.login(loginUrl.value, {
        code: loginRes.code,
        loginCode: loginCode.value,
        avatar: avatar.value,
        username: username.value
      }).then((res: any) => {
        console.log(res)
        if (res.data.code === 0) {
          uni.showToast({
            icon: 'success',
            title: '授权成功'
          })
        }
      }).finally(() => {
        loginCode.value = ''
      })
    }
  });
}

const handleScan = () => {
  uni.scanCode({
    success: (res) => {
      if (!checkURL(res.result)) {
        uni.showToast({
          icon: 'error',
          title: '二维码无效'
        })
        return
      }
      const url = res.result
      const obj = getUrlObj(url)
      loginCode.value = obj.loginCode
      loginUrl.value = obj.loginUrl
      fileUrl.value = obj.fileUrl
      filePrefix.value = obj.filePrefix
      console.log('obj', obj)
      console.log(url)
    }
  });

}

</script>

<style scoped>
.avatar-wrapper {
  padding: 0;
  width: 80px !important;
  margin-top: 10%;

}

.avatar {
  display: block;
  width: 80px;
  height: 80px;
}
</style>
